import { Form, Input, DatePicker, InputNumber, Switch, Select, FormInstance, Radio, TreeSelect } from 'antd'
import Upload from '@/components/Upload'
import './index.less'
import { Fragment } from 'react'
const { RangePicker } = DatePicker
const { Option } = Select
interface Iprops {
  form: FormInstance
  editConfig?: IItemArray[]
  layout?: 'inline' | 'horizontal' | 'vertical'
  isNotModal?: boolean //是否用于modal中 在modal中自动居中 不在modal中会页面靠左
  footer?: string | React.ReactNode
  initialValues?: object
}
type IType =
  | 'Custom'
  | 'Input'
  | 'TreeSelect'
  | 'Search'
  | 'Password'
  | 'TextArea'
  | 'Upload'
  | 'InputNumber'
  | 'Select'
  | 'Switch'
  | 'DatePicker'
  | 'RangePicker'
  | 'Cascader'
  | 'Radio'
  | 'Transfer'
interface IItemArray {
  name: string
  label: string
  type: IType
  option?: IOption[]
  config?: object
  valuePropName?: string //比如switch使用的是checked而不是value控制的状态 这时我们可以通过valuePropName把状态绑定到对应的属性上
  checked?: boolean
  rules?: any
  placeholder?: string
  tooltip?: string
  format?: string
  content?: React.ReactNode
  [k: string]: any
}
interface IOption {
  label: string | number
  value: string | number
  disabled?: boolean
}
export default function EditFormComponent(props: Iprops) {
  const getComponents = (item: IItemArray) => {
    const value = item.type ? item.type : 'Input'
    switch (value) {
      case 'Search':
        return <Input.Search placeholder={item.placeholder} {...item.config} />
      case 'TextArea':
        return <Input.TextArea placeholder={item.placeholder} {...item.config} />
      case 'Upload':
        return <Upload {...item.config} />
      case 'InputNumber':
        return <InputNumber style={{ width: '100%' }} placeholder={item.placeholder} {...item.config} />
      case 'Select':
        return (
          <Select {...item.config} placeholder={item.placeholder}>
            {item.option &&
              item.option.map((mini) => {
                return (
                  <Option key={mini.value} {...mini}>
                    {mini.label}
                  </Option>
                )
              })}
          </Select>
        )
      case 'Switch':
        return <Switch {...item.config} />
      case 'Radio':
        return (
          <Radio.Group {...item.config}>
            {item.option?.map((item: any) => {
              return (
                <Radio value={item.value} key={item.value}>
                  {item.label}
                </Radio>
              )
            })}
          </Radio.Group>
        )
      case 'TreeSelect':
        return (
          <TreeSelect
            allowClear
            autoClearSearchValue
            showSearch
            treeNodeFilterProp="label"
            treeData={item.option}
            treeLine
            placeholder={item.placeholder}
            {...item.config}
          ></TreeSelect>
        )
      case 'DatePicker':
        return <DatePicker style={{ width: '100%' }} placeholder={item.placeholder} {...item.config} />
      case 'RangePicker':
        return <RangePicker format="YYYY-MM-DD HH:mm:ss" {...item.config} />
      case 'Custom':
        return item?.content
      default:
        return <Input placeholder={item.placeholder} {...item.config} />
    }
  }
  return (
    <div className="form_edit_wrap" style={{ paddingBottom: props.isNotModal ? 50 : '' }}>
      <Form
        form={props.form}
        labelCol={{ span: 24 }}
        wrapperCol={{ span: 24 }}
        layout="vertical"
        initialValues={props?.initialValues}
      >
        {props.editConfig &&
          props.editConfig.map((item, index) => {
            return (
              <Fragment key={index}>
                {item?.slot ? item?.content : <Form.Item {...item}>{item ? getComponents(item) : null}</Form.Item>}
              </Fragment>
            )
          })}
      </Form>
      {props?.footer && <div className={'footer_btm_cls'}>{props?.footer}</div>}
    </div>
  )
}
